<template>
  <div>
    <h1>现在的数量：{{$store.state.num}}</h1>
    <h1>getters的数量:{{$store.getters.newNum}}</h1>
    <button @click="addNum">数量++</button>
    <button @click="subNum">数量--</button>
    <button @click="OddaddNum">奇数++</button>
    <button @click="addNumAsync">一秒后++</button>
    <button @click="addCount">state中的num累加data中的count</button>
    
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      count:6,
    }
  },
  methods:{
    addNum(){
      // 应该先触发某个actions函数
      //  参数1 某个actions函数的名字
      this.$store.dispatch('addNum')

      // 3.如果咱们actions没有自己的逻辑(判断 循环 异步....) 只是把修改数据的任务提交给某个mutations函数 那么咱们可以不用写他  可以这么写 没问题 但是咱们很少这么用
      // this.$store.commit('ADD')
    },
    subNum(){
      this.$store.dispatch('subNum')
    },
    OddaddNum(){
      this.$store.dispatch('OddaddNum')
    },
    addNumAsync(){
      this.$store.dispatch('addNumAsync')
    },
    addCount(){
      // dispatch让某个actions函数执行 本质dispatch其实就是在调用那个actions函数
      // 参数： 1.某个actions函数的名字  2. 调用actions函数传递的实参
      // 注意点:传递实参只能传递一个 如果想传多个数据 传对象或者数组
      this.$store.dispatch('addCount',this.count)
      // this.$store.dispatch('addCount',[this.count,3,4,2])
    },
  }
}
</script>

<style scoped>

</style>
